<template>
  <van-pull-refresh v-model="pullLoading" @refresh="loadFiles">
    <van-loading v-if="loading" size="24px" class="text-center mt-[40%]">
      {{ $t('detail.loading') }}
    </van-loading>

    <div v-if="!loading" class="main-container px-[15px] min-h-[calc(100vh-64px-50px)]">
      <InfoCard class="mt-1" :noDivider="true">
        <FileListCard :files="files" :onClick="clickFile" />
      </InfoCard>
    </div>

    <van-image-preview v-model:show="previewShow" :images="images" :closeable="true" :start-position="startPosition" />
  </van-pull-refresh>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

import FileListCard from '@/components/file-list/FileListCard.vue';
import { useFileList } from '@/composables/file-list/useFileList';

const route = useRoute();
const router = useRouter();
const { files, images, previewShow, startPosition, loading, pullLoading, loadFiles, clickFile } = useFileList(
  route,
  router
);

onMounted(() => {
  document.body.style.backgroundColor = '#f7f8f9';
});

watch(
  () => route.query,
  () => {
    loadFiles();
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
:root {
  --van-field-input-text-color: #333;
  --van-button-primary-background-color: #ff5722;
}

.main-container {
  background-color: var(--color-background-2);
  padding-bottom: 14px;
}

:deep(.van-tabs__nav) {
  background: unset;

  .van-tabs__line {
    background: var(--color-main);
    bottom: 20px;
  }

  .van-tab--active {
    color: var(--color-main);
  }
}

:deep(.van-dialog) {
  top: 50%;
  width: 90%;
}

.file-list-item {
  &__name {
    font-size: 11px;
  }

  &__time {
    font-size: 10px;
  }
}
</style>
